<template>
  <el-container>
    <el-header>
      <div class="header-left">
        <div class="title">爱美食</div>
        <div class="menu">
          <el-menu mode="horizontal" router>
            <el-menu-item index="/shipu">食谱大全</el-menu-item>
            <el-menu-item index="/caidan">菜单大全</el-menu-item>
            <el-menu-item index="/shicai">食材大全</el-menu-item>
          </el-menu>
        </div>
      </div>

      <div class="header-right">
        <div class="userinfo" v-if="$store.state.myInfo.id != 0">
          <el-avatar size="medium" :src="userInfo.avatar"></el-avatar>
          <el-dropdown>
            <span class="link-btn" style="padding: 0 1.25rem">
              {{ userInfo.username }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="$router.push('/user/me')"
                >个人主页</el-dropdown-item
              >
              <el-dropdown-item @click.native="toFixPassword()"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item @click.native="logout()" divided
                >退出登陆</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="warning" @click="toPublish()">发布食谱</el-button>
        </div>
        <div class="btns" v-else>
          <span type="text" class="link-btn" @click="toLogin()">登录</span>
          <el-divider direction="vertical"></el-divider>
          <span type="text" class="link-btn" @click="toRegister()">注册</span>
        </div>
      </div>
    </el-header>

    <el-main class="backtop">
      <el-backtop target=".backtop"></el-backtop>
      <router-view
        @toLogin="toLogin()"
        @toRegister="toRegister()"
      ></router-view>
    </el-main>

    <!-- 登录框 -->
    <el-dialog title=" 登录" :visible.sync="showLoginBox" width="30%">
      <el-form>
        <el-form-item>
          <el-input placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入密码"></el-input>
          <span
            >没有账号？
            <span class="link-btn" @click="toRegister()">
              快速注册>></span
            ></span
          >
        </el-form-item>
      </el-form>

      <div class="btns">
        <el-button type="primary" @click="login()">登录</el-button>
        <el-button @click="canncelLogin()">取消</el-button>
      </div>
    </el-dialog>
    <!-- 注册框 -->
    <el-dialog title="注册" :visible.sync="showRegisterBox" width="30%">
      <el-form>
        <el-form-item>
          <el-input
            placeholder="请输入邮箱"
            v-model="registerForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入验证码" v-model="registerForm.keyCode">
            <el-button
              slot="append"
              @click="sendCode()"
              :disabled="sendingCode.sending"
              >{{ sendingCode.text }}</el-button
            >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请请输入密码"
            v-model="registerForm.password"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请再输入密码"
            v-model="registerForm.rePassword"
            type="password"
          ></el-input>
          <span
            >已有账号？
            <span class="link-btn" @click="toLogin()"> 快速登录>></span></span
          >
        </el-form-item>
      </el-form>

      <div class="btns">
        <el-button type="primary" @click="register()">注册</el-button>
        <el-button @click="canncelRegister()">取消</el-button>
      </div>
    </el-dialog>

    <!-- 修改密码框 -->
    <el-dialog title="修改密码" :visible.sync="showPasswordBox" width="30%">
      <el-form>
        <el-form-item>
          <el-input placeholder="请输入原密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请再次输入新密码"></el-input>
        </el-form-item>
      </el-form>

      <div class="btns">
        <el-button type="primary" @click="fixPassword()">修改</el-button>
        <el-button @click="canncelFixPassword()">取消</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        avatar:
          "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
        username: "用户_18293749",
      },
      showLoginBox: false,
      showRegisterBox: false,
      showPasswordBox: false,
      LoginBoxType: 1,
      registerForm: {
        username: "",
        password: "",
        rePassword: "",
        keyCode: "",
      },
      sendingCode: {
        sending: false,
        text: "发送验证码",
        timer: null,
        count: 0,
      },
      registerSending: false,
    };
  },
  methods: {
    //发验证码
    async sendCode() {
      if (!this.sendingCode.timer) {
        const TIME_COUNT = 60;
        this.sendingCode.count = TIME_COUNT - 1;
        this.sendingCode.sending = true;
        if (
          this.sendingCode.count > 0 &&
          this.sendingCode.count <= TIME_COUNT
        ) {
          this.sendingCode.text = this.sendingCode.count + "s后可重新发送";
          this.sendingCode.count--;
        }
        this.sendingCode.timer = setInterval(() => {
          if (
            this.sendingCode.count > 0 &&
            this.sendingCode.count <= TIME_COUNT
          ) {
            this.sendingCode.text = this.sendingCode.count + "s后可重新发送";
            this.sendingCode.count--;
          } else {
            clearInterval(this.sendingCode.timer);
            this.sendingCode.timer = null;
            this.sendingCode.text = "重新发送";
            this.sendingCode.sending = false;
          }
        }, 1000);
        // const reqData = {
        //   username: this.registerForm.username,
        // };
        // const res = await this.$http.post("/sendRegisterKeyCode", reqData);
        // if (res.ret < 0) {
        //   return;
        // } else {
        //   res = res.ent;
        // }
        // if (res.ok) {
        //   this.$msg.success(res.msg);
        // } else {
        //   this.$msg.error(res.msg);
        // }
      }
    },
    logout() {
      this.$store.state.myInfo.id = 0;
    },
    toForget() {
      //找回密码
    },
    toFixPassword() {
      this.showPasswordBox = true;
    },
    toRegister() {
      this.showRegisterBox = true;
      this.showLoginBox = false;
    },
    toLogin() {
      this.showLoginBox = true;
      this.showRegisterBox = false;
    },
    toPublish() {
      this.$router.push("/publish");
    },
    login() {
      this.showLoginBox = false;
      this.$store.state.myInfo.id = 1;
    },
    register() {
      if (this.registerForm.username == "")
        return this.$msg.error("用户名不能为空");

      if (this.registerForm.keyCode == "")
        return this.$msg.error("请输入验证码");

      if (this.registerForm.password == "")
        return this.$msg.error("密码不能为空");

      if (this.registerForm.rePassword == "")
        return this.$msg.error("请再次输入密码");

      if (this.registerForm.password != this.registerForm.rePassword)
        return this.$msg.error("两次密码输入不一致");

      this.showRegisterBox = false;
      this.$store.state.myInfo.id = 1;
    },
    fixPassword() {
      this.canncelFixPassword();
    },
    canncelLogin() {
      this.showLoginBox = false;
    },
    canncelRegister() {
      this.showRegisterBox = false;
    },
    canncelFixPassword() {
      this.showPasswordBox = false;
    },
  },
};
</script>

<style lang="less" scoped>
.el-container {
  min-height: 100%;
  height: 100%;
  .el-header {
    background-color: #f05365;
    color: #333;
    height: 60px;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    .header-left {
      display: flex;
      flex-direction: row;
      align-items: center;
      .title {
        padding: 20px;
        font-size: 20px;
        font-weight: 600;
        color: #fabc2a;
      }
      .menu {
        margin-left: 50px;
        background-color: rgba(0, 0, 0, 0);
        .el-menu {
          background-color: rgba(0, 0, 0, 0);
          .el-menu-item {
            color: #fabc2a;
            font-weight: 600;
          }
        }
      }
    }
    .header-right {
      .userinfo,
      .btns {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 100%;
      }
    }
  }
  .el-main {
    background-color: #f2edeb;
  }
  .el-dialog {
    .btns {
      display: flex;
      justify-content: space-around;
      .el-button {
        width: 40%;
      }
    }
  }
  /deep/.el-menu--horizontal {
    border: 0;
  }
  /deep/.el-menu-item {
    border: 0;
  }
}
</style>

